import React from 'react'
import Weather from './components/Weather'
import Fruits from './components/Fruits'
import Count from './components/Count'
import CountContainer from "./container/Count";
import CountHooks from './components/Count_hooks'
import StyledComponents from './components/StyledComponents';
import store from './redux/store'
import styled from 'styled-components'
import Home from './pages/Home'
import About from './pages/About'
import { Link, BrowserRouter, Switch, Route } from 'react-router-dom'

const StyledChild = styled(StyledComponents)`background: blue;
 width: 100px;
 color: ${(props) => props.bg}
`;

class App extends React.Component { 
  state = {
    num: 1
  }
  say = (params) => { 
    console.log('6', params);
  }
  add = () => {
    this.setState((state, props) => {
      console.log(state, props);
      return {
        num: state.num + props.delta
      }
    })
  }
  render() { 
    return (
      <div>
        <h1>头部标题部分</h1>
        <span style={{display: 'block'}}>{ this.state.num }</span>
        <button onClick={ this.add }>+1</button>
        <StyledChild bg="red"></StyledChild>
        <h4>导航区</h4>
        {/* 编写路由链接 */}
        <BrowserRouter>
          <Link to="/home">Home</Link>
          <div></div>
          <Link to="/about">About</Link>
          {/* 注册路由   */}
          <Switch>
            <Route path="/home" component={ Home}></Route>
            <Route path="/about" component={ About}></Route>
          </Switch>
        </BrowserRouter>

        
        {/* <Weather say={this.say}></Weather>
        <Fruits></Fruits> */}
        <Count></Count>
        {/* 渲染容器组件，必须传入store */}
        {/* <CountContainer store={store}></CountContainer>
        <hr />
        <CountHooks></CountHooks> */}
      </div>
    )
  }
}

export default App;
